﻿@{
    ViewBag.Title = "Area";
}

<h1>Actualizar &Aacute;rea</h1>
<script type="text/javascript">
    function BuscarArea() {
        var nombre = $("#txtNombe").val();
        var urlSearch = '@Url.Action("BuscarArea", "Area")'
        var paramSearch = "{ 'Nombre': '" + nombre + "'}";
        $.ajax({
            url: urlSearch,
            type: "POST",
            data: paramSearch,
            contentType: "application/json",
            dataType: "json",
            success: function (result) {
                $("#tablaListado tbody tr").remove();
                if (result != "") {
                    $.each(result, function (i, item) {
                        var row = "<tr>" +
                              "<td>" + item.IdArea + "</td>" +
                              "<td>" + item.NombreArea + "</td>" +
                              "<td>" + (item.EstadoArea == "1" ? "Activo" : "Inactivo") + "</td>" +
                              "<td><a href='#' class='button' onclick='editarArea(" + item.IdArea + ")'>Editar</a></td>" +
                              "<td><a href='#' class='button' onclick='eliminarArea(" + item.IdArea + ")'>Eliminar</a></td>" +
                              "</tr>";
                        $("#tablaListado tbody").append(row)
                    });
                    $(".button").button();
                } else {
                    $("#tablaListado tbody").append("<tr><td colspan='6'>No existen áreas para los criterios de búsqueda ingresados..</td></tr>")
                }
            },
            error: msgError
        });

    }

    function editarArea(idArea) {
        Limpiar();
        var urlSearch = '@Url.Action("DatosArea", "Area")'
        var paramSearch = "{ 'idArea': '" + idArea + "'}";
        $.ajax({
            url: urlSearch,
            type: "POST",
            data: paramSearch,
            contentType: "application/json",
            dataType: "json",
            success: function (result) {
                $("#IdArea").val(result.IdArea);
                $("#NombreArea").val(result.NombreArea);
                $("#EstadoArea").val(result.EstadoArea);
                MostrarBuscar(false);
            },
            error: msgError
        });
    }

    function eliminarArea(idArea) {
        if (confirm("Está seguro que desea eliminar la información del área")) {
            var urlSearch = '@Url.Action("DeleteArea", "Area")'
            var paramSearch = "{ 'idArea': '" + idArea + "'}";
            $.ajax({
                url: urlSearch,
                type: "POST",
                data: paramSearch,
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    alert(result.split("|")[1]);
                    if (result.split("|")[0] == "1") {
                        BuscarArea();
                        MostrarBuscar(true);
                    }
                },
                error: msgError
            });
        }
    }

    function GrabarArea() {
        var urlSearch = '@Url.Action("SaveArea", "Area")'
        var IdArea = $("#IdArea").val();
        var NombreArea = $("#NombreArea").val();
        var EstadoArea = $("#EstadoArea option:selected").val(); 
        var texto = "Está seguro que desea registrar el área";
        if (IdArea != "0")
            texto = "Está seguro que desea modificar el área";
        if (confirm(texto)) {
            var paramSearch = "{ 'IdArea': '" + IdArea + "', 'NombreArea': '" + NombreArea + "', 'EstadoArea': '" + EstadoArea + "'}";
            $.ajax({
                url: urlSearch,
                type: "POST",
                data: paramSearch,
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    alert(result.split("|")[1]);
                    if (result.split("|")[0] == "1") {
                        BuscarArea();
                        MostrarBuscar(true);
                    }
                },
                error: msgError
            });
        }
    }

    function NuevoArea() {
        Limpiar();
        MostrarBuscar(false);
    }

    function CancelarArea() {
        $('#divbuscar').show('slow');
        $('#divdatos').hide('slow');
    }

    function MostrarBuscar(val) {
        if (val) {
            Limpiar();
            $('#divbuscar').show('slow');
            $('#divdatos').hide('slow');
        } else {
            $('#divbuscar').hide('slow');
            $('#divdatos').show('slow');
        }
    }

    function Limpiar() {
        $("#IdArea").val("0");
        $("#NombreArea").val("");
        $("#EstadoArea").val("1");
    }

    function msgError(error) {
        var err = (typeof error.responseText) == 'string' ? eval('(' + error.responseText + ')') : error.responseText;
        alert('Error: ' + err.Message);
    }

    $(document).ready(function () {
        BuscarArea();
    });
</script>
<div id="divbuscar">
<table cellpadding="2" cellspacing="2" style="width: 80%;  border-collapse: collapse;">
    <tr>
        <td>Nombre:</td>
        <td><input type="text" id="txtNombe" name="txtNombe" maxlength="200" style="width: 250px" /></td>
        <td>
        <input type="button" id="btnBuscar" value="Buscar" onclick="BuscarArea()" />
        <input type="button" id="btnNuevo" value="Nuevo" onclick="NuevoArea()" />
        </td>
    </tr>
</table>
<br />
<table id="tablaListado" class="mGrid" cellpadding="2" cellspacing="2" style="border-collapse: collapse;">
    <thead>
        <tr>
            <th>C&oacute;digo</th>
            <th align="center">Nombre</th>
            <th align="center">Estado</th>
            <th align="center">&nbsp;</th>
            <th align="center">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="6">
                No existen áreas para los criterios de búsqueda ingresados..
            </td>
        </tr>
    </tbody>
</table>
</div>
<div id="divdatos" style="display: none">
<fieldset>
<legend style="text-align: left">Datos &Aacute;rea</legend>
<table cellpadding="2" cellspacing="2" style="width: 80%;  border-collapse: collapse;">
    <tr>
        <td>C&oacute;digo:</td>
        <td><input type="text" id="IdArea" name="IdArea" value="0" readonly="readonly" style="width: 70px" /></td>
    </tr>
    <tr>
        <td>Nombre:</td>
        <td><input type="text" id="NombreArea" name="NombreArea" maxlength="200" style="width: 250px" /></td>
    </tr>
    <tr>
        <td>Estado:</td>
        <td><select id="EstadoArea" name="EstadoArea"><option value="1">Activo</option><option value="0">Inactivo</option></select></td>
    </tr>
    <tr>
        <td>
        <input type="button" id="btnGrabar" value="Grabar" onclick="GrabarArea()" />
        <input type="button" id="btnCancelar" value="Cancelar" onclick="CancelarArea()" />
        </td>
    </tr>
</table>
</fieldset>
</div>